<template>
  <!-- v-if="device !== 'mobile'" -->
  <el-tooltip
    :content="$t('public.map')"
    placement="right"
    effect="light"
    class="tooltip-dropdown-wrap"
  >
    <el-dropdown trigger="click" @command="handleSetMap">
      <div class="svg-wrap right-menu-item">
        <svg-icon class-name="svg-icon" icon-class="map" />
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :disabled="map === 'AMAP'" command="AMAP">
            {{ $t('public.amap') }}
          </el-dropdown-item>
          <el-dropdown-item :disabled="map === 'GMAP'" command="GMAP">
            {{ $t('public.gmap') }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-tooltip>
</template>

<script setup>
const appStore = useAppStore()
const { map } = storeToRefs(appStore)
const handleSetMap = map => {
  appStore.setMap(map)
  localStorage.setItem('map', map)
  // window.location.reload()
}
</script>
